<script>
export default {
  name: "CatMedicalRecord"

}
</script>
<script setup>
import mitt from '@/views/lending/utils/mitt';

import {inject, onMounted, onUnmounted, ref, watch,} from "vue";
import {FirstAidKit, User} from "@element-plus/icons-vue";
import CryptoJS from "crypto-js"
import {useRoute} from "vue-router";
//targetName:调用组件名
const targetName= ref('');
//patientInfo:患者信息
const patientInfo = ref('');
//borrowInfo:借阅信息
const borrowInfo = ref('')
//specificFunctions:定制借阅信息
const specificFunctions = ref('')
//specificColor:定制颜色
const specificColor = ref('')


// // 解密数据
const secretKey = ref(''); // 必须与加密时使用的密钥相同
const ruleControlData = ref('');
//getRuleData:接收数据
function getRuleData(){
  // 解密
  const route = useRoute();
  const encryptedData = route.query.temp;
  //获取秘钥
  if(secretKey.value === ''){
    getSession()
  }
  //获取数据
  ruleControlData.value = JSON.parse(CryptoJS.AES.decrypt(encryptedData,secretKey.value).toString(CryptoJS.enc.Utf8));

}
//getSession:获取秘钥
function getSession(){
  if(!sessionStorage.getItem('catSecretKey')){
    alert('数据未同步,请退回列表，重新进入')
  }
  //获取秘钥
  secretKey.value = sessionStorage.getItem('catSecretKey');

}
//initialize：初始化数据
const initialize = () => {
  ruleControlData.value.forEach((ruleItem) => {
    Object.keys(ruleItem).forEach((keyItem) => {
      console.log( keyItem )
      switch (keyItem){
        case 'targetName':
          targetName.value = ruleItem[keyItem]
          break
        case 'patientInfo':
          patientInfo.value = ruleItem[keyItem]
          break
        case 'borrowInfo':
          borrowInfo.value = ruleItem[keyItem]
          break
        case 'specificFunctions':
          specificFunctions.value = ruleItem[keyItem]
          break
        case 'specificColor':
          specificColor.value = ruleItem[keyItem]
         break
        default:
          console.warn(`Unknown key: ${keyItem}`);
          break;
      }
    });
  });
  console.log(targetName.value)
  console.log(patientInfo.value)
  console.log(borrowInfo.value)
  console.log(specificFunctions.value)
  console.log(specificColor.value)
};
//初始化渲染
onMounted(() => {
  // 获取查询参数中的加密数据
  getRuleData()
  initialize()
});

//卸载前
onUnmounted(() => {
  console.log('开始卸载')
  //删除秘钥
  sessionStorage.removeItem('catSecretKey');
})
</script>


<template>
  <div style="background-color:#F0F2F5;padding: 0;width: 100%;height: 100%;">
      <el-card shadow="never" style="background-color:#fff;padding:20px 0;width: 1150px;margin: 0 auto 20px auto;">
    <!--    借阅人-->

        <div>
          <span class='form-header-one'  >查看登记</span>
          <span class="form-header-two">
            借阅状态:
            <span>1111</span>
          </span>
        </div>



        <el-divider style="margin-top:35px;margin-bottom:10px" content-position="left"/>
        <span class="form-header">
          <el-icon style="margin-right: 10px; font-size: 20px;color:#0468FF" ><FirstAidKit /></el-icon>
          患者信息
        </span>

        <el-descriptions :column="4"   style="  margin-top:20px;padding: 0 20px" v-for="(item,index) in patientInfo">
          <!--          病案号-->
          <el-descriptions-item
              :label="item"
              label-align="left"
              align="left"
              width="200px"
              class-name="my-content"
              label-class-name="my-label"
          >
            <span style="caret-color: #2c3e50">kooriookami</span>
          </el-descriptions-item>
          <!--          住院号-->
          <el-descriptions-item
              label="住院号："
              label-align="left"
              align="left"
              width="200px"
              class-name="my-content"
              label-class-name="my-label"
          >
            <span style="caret-color: #2c3e50">kooriookami</span>
          </el-descriptions-item>
          <!--          患者姓名-->
          <el-descriptions-item
              label="患者姓名："
              label-align="left"
              align="left"
              width="200px"
              class-name="my-content"
              label-class-name="my-label"
          >
            <span style="caret-color: #2c3e50">kooriookami</span>
          </el-descriptions-item>
          <!--          患者性别-->
          <el-descriptions-item
              label="性别："
              label-align="left"
              align="left"
              width="200px"
              class-name="my-content"
              label-class-name="my-label"
          >
            <span style="caret-color: #2c3e50">kooriookami</span>
          </el-descriptions-item>
          <!--          年龄-->
          <el-descriptions-item
              class-name="my-content"
              label-class-name="my-label"
              label="年龄："
              label-align="left"
              align="left"
              width="200px">
            <span>kooriookami</span>
          </el-descriptions-item>
          <!--          住院病区-->
          <el-descriptions-item
              class-name="my-content"
              label-class-name="my-label"
              label="住院病区："
              label-align="left"
              align="left"
              width="200px">
            <span style="caret-color: #2c3e50">kooriookami</span>
          </el-descriptions-item>
          <!--          入院时间-->
          <el-descriptions-item
              class-name="my-content"
              label-class-name="my-label"
              label="入院时间："
              label-align="left"
              align="left"
              width="200px">
            <span>kooriookami</span>
          </el-descriptions-item>
          <!--          出院时间-->
          <el-descriptions-item
              class-name="my-content"
              label-class-name="my-label"
              label="出院时间："
              label-align="left"
              align="left"
              width="200px">
            <span >kooriookami</span>
          </el-descriptions-item>
          <!--          出院诊断-->
          <el-descriptions-item
              class-name="my-content"
              label-class-name="my-label"
              label="出院诊断："
              label-align="left"
              align="left"
              width="200px">
            <span>kooriookami</span>
          </el-descriptions-item>
        </el-descriptions>
        <span class="form-header" style="margin-top: 20px">
          <el-icon style="margin-right: 10px; font-size: 20px;color:#0468FF" ><User /></el-icon>
          借阅信息
        </span>

        <el-descriptions :column="4"  :border="false"  style="  margin-top:20px;padding: 0 20px"  >
          <!--          借阅人-->
          <el-descriptions-item
              label="借阅人："
              label-align="left"
              align="left"
              width="200px"
              class-name="my-content"
              label-class-name="my-label"
          >
            <span style="caret-color: #2c3e50">kooriookami</span>
          </el-descriptions-item>
          <!--          借阅日期-->
          <el-descriptions-item
              class-name="my-content"
              label-class-name="my-label"
              label="借阅日期："
              label-align="left"
              align="left"
              width="200px" >
            <span>kooriookami</span>
          </el-descriptions-item>
          <!--          归还时间-->
          <el-descriptions-item
              class-name="my-content"
              label-class-name="my-label"
              label="归还时间："
              label-align="left"
              align="left"
              width="200px">
            <span>kooriookami</span>
          </el-descriptions-item>
          <!--          操作员-->
          <el-descriptions-item
              class-name="my-content"
              label-class-name="my-label"
              label="操作员："
              label-align="left"
              align="left"
              width="200px">
            <span>kooriookami</span>
          </el-descriptions-item>
          <!--          登记时间-->
          <el-descriptions-item
              class-name="my-content"
              label-class-name="my-label"
              label="登记时间："
              label-align="left"
              align="left"
              width="200px">
            <span>kooriookami</span>
          </el-descriptions-item>
          <!--          借阅原因-->
          <el-descriptions-item
              class-name="my-content"
              label-class-name="my-label"
              label="借阅原因："
              label-align="left"
              align="left"
              width="200px">
            <span>kooriookami</span>
          </el-descriptions-item>

        </el-descriptions>

        <div style="display: flex; justify-content:left;gap: 20px; margin: 30px">
          <el-button style="margin-right: 1px" >编辑</el-button>
          <el-button @click="aa" style="margin-left: 1px;">取消登记</el-button>
        </div>
      </el-card>
  </div>
</template>

<style scoped>

/* 定义容器的样式 */

.form-header-one{
  float: left;
  font-weight: bold;
  font-size: 20px;
  padding: 0 10px;
}
.form-header-two{
  float: right;
  font-size: 14px;
  color: #7F7F7F;
}
/*.form-header-one{
  display: flex;
  align-items: flex-start;
  justify-content:flex-start;
  height: 40px;
  font-weight: bold; !* 加粗字体 *!
  margin-top:3px;
  padding: 0 10px;
  font-size: 20px;
}*/
.form-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  font-weight: bold; /* 加粗字体 */
  padding: 0 10px;
  margin-right:1px;
  font-size: 16px;
  color: #000000;
  margin-top: 10px
}
.custom-input   {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 230px;
  height: 32px;
  padding: 2px 10px 2px 10px;
  font-family: 'Microsoft YaHei UI', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #000000;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}
.custom-input-one   {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 32px;
  padding: 2px 10px 2px 10px;
  font-family: 'Microsoft YaHei UI', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #000000;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}
.custom-form-item  {
  --el-form-label-font-size: 13.5px;
}
/*啊实打实*/
:deep(.my-label) {
  color: #000000 !important;
  font-weight: normal !important;
}



 :deep(.my-content) {
   text-align: left !important;
   color: #7F7F7F !important;
 }



</style>
